<template>
  <div class="header-wrap">
    <Search v-show="showSearch" @closeSear="showSearch=false"></Search>
    <div class="header ">
      <router-link class="logo" :to="`/`"><img src="../assets/img/fxl_logo.png" alt=""></router-link>
      <div class="right-nav">
       <el-menu  
       style="display: inline-block"
       open="2"
       :default-active="$route.fullPath"
        class="el-menu-demo"
        mode="horizontal"
        text-color="#393939"
        active-text-color="#d3202a"
        menu-trigger="click"
        unique-opened="false"
        :router="openRouter"
        ref="xx"
        @open = 'openMenu'
        >
        <el-menu-item class="hidden-xs-only" index="/">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title" index="/info/aboutus/1/"><router-link to="/info/aboutus/1/">关于我们</router-link></template>
          <el-menu-item index="/info/aboutus/1/">公司简介</el-menu-item>
          <el-menu-item index="/info/aboutus/2/">公司架构</el-menu-item>
          <el-menu-item index="/info/aboutus/3/">发展历程</el-menu-item>
          <el-menu-item index="/info/aboutus/4/">社会责任</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><router-link to="/NewsCenter/journalism/#all">新闻中心</router-link></template>
           <el-menu-item index="/NewsCenter/journalism/#all" style="display:none"></el-menu-item>
          <el-menu-item index="/NewsCenter/journalism/#news">公司新闻</el-menu-item>
          <el-menu-item index="/NewsCenter/journalism/#pro">项目动态</el-menu-item>
          <el-menu-item index="/NewsCenter/journalism/#media">媒体动态</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"> <router-link to="/info/business/1/">公司业务</router-link></template>
          <el-menu-item index="/info/business/1/">房地产板块</el-menu-item>
          <el-menu-item index="/info/business/2/">物业管理板块</el-menu-item>
          <el-menu-item index="/info/business/3/">旅游产业板块</el-menu-item>
          <el-menu-item index="/info/business/4/">文化体育板块</el-menu-item>
          <el-menu-item index="/info/business/5/">金融服务板块</el-menu-item>
        </el-submenu>
          <el-submenu index="7">
          <template slot="title"><router-link to="/NewsCenter/laborunion/#all">党团工会</router-link></template>
           <el-menu-item index="/NewsCenter/laborunion/#all" style="display:none"></el-menu-item>
          <el-menu-item index="/NewsCenter/laborunion/#dynamic">方兴利党支部</el-menu-item>
          <el-menu-item index="/NewsCenter/laborunion/#teach">工会活动</el-menu-item>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title"><router-link to="/info/enterprise/1/">企业文化</router-link></template>
          <el-menu-item index="/info/enterprise/1/">企业理念</el-menu-item>
          <el-menu-item index="/info/enterprise/2/">员工风采</el-menu-item>
           <el-menu-item index="/info/enterprise/3/">员工活动</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
          <template slot="title"><router-link to="/info/hr/1/">人力资源</router-link></template>
          <el-menu-item index="/info/hr/1/">人才理念</el-menu-item>
           <el-menu-item index="/info/hr/3/">招聘信息</el-menu-item>
        </el-submenu>
      </el-menu>
      <i class="el-icon-search fxl-search hidden-xs-only" @click="showSearch = true"></i>
    </div>
    </div> 
  </div>
</template>

<script>
import Search from "../components/Search";
export default {
  name: 'Header',
  data() {
    return {
      showSearch: false,
      openRouter: true
    }
  },
  created() {
  },
  components: {
    Search
    
  },
  methods: {
    openMenu(index) { 
      setTimeout(() => {
         this.$refs.xx.close(index)
      }, 2000);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
.el-menu.el-menu--horizontal{
  border: none;
}

.el-menu--horizontal .el-menu .el-menu-item{
  display inline-block
}

.el-menu--horizontal>.el-submenu.is-active .el-submenu__title, .el-menu--horizontal>.el-menu-item.is-active{
  border-bottom: 2px solid #d3202a;
  color #d3202a
  i {
    color #d3202a
  }
}
.el-submenu__title,.el-menu-item{
  font-size 16px;
}

.el-menu--popup{
  min-width: 150px;
  padding: 5px 10px;
  margin-top: 18px;
  margin-left: -30%;
  margin-right: 30%;
  background-color #D8D8D8
}
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
  background-color #D8D8D8
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
  color #d3202a !important
}

.header-wrap
  position fixed
  top 0px
  left 0px
  width 100%
  z-index 999
  display flex
  flex-direction column
  justify-content center
  height 92px
  background-color #fff
  .min-nav, .min-header
    display none
  .header
    display: flex;
    justify-content: space-between;
    max-width: 1160px;
    box-sizing border-box
    width 100%
    padding: 0 20px
    margin: 0 auto;
    .right-nav
      line-height 46px
      .fxl-search
        font-size 21px
        font-weight 500
        vertical-align top
        margin-top 21px
        margin-left 10px
        cursor pointer
        &:before
          color: #3d3d3d
      a
        display inline-block
        box-sizing border-box
        border-bottom 2px solid #fff
        &:hover
          color #d3202a
          text-decoration none
    .logo
      margin-top 13px
      img
        height: 45px;
        display: inline-block;
@media (max-width 765px) 
  .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow
    display none
  .header-wrap
    display block
    height auto
    .header
      display block
      padding 0
      .logo
        display block
        width 100%
        margin-top 4px
        text-align center
        img
          height 25px
          width auto
      .el-menu-demo
        display: flex !important
        justify-content: space-around;
        height: 33px;
      .el-menu-item
        padding 0 3px
      .el-submenu__title 
        padding 0 3px
      .el-submenu__title, .el-menu-item
        font-size 13px
        height 30px
        line-height 30px
  .el-menu--horizontal .el-menu .el-menu-item
    display block
  .el-menu--popup 
    min-width: 100px;
    background-color: #d8d8d8;
    margin 0
    margin-top 10px
    li
      font-size 13px
  .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title
    height 30px
    line-height 30px
    

</style>  
